<template>
  <div class="information-item" @click="toInfoDetailPage(props.infoId)">
    <div class="mains">
      <div class="content">
        <!-- 内容 -->
        <div style="display: flex; flex: 1; overflow: hidden">
          <information-item-content :info-data="props.infoData">
            <template #leftContent="slotParam">
              <div class="img-container">
                <img
                  v-if="slotParam.thumbUrl.substr(slotParam.thumbUrl.length - 1) !== '4'"
                  class="cover"
                  :src="getThumbUrl(slotParam.thumbUrl)"
                />
                <video v-else class="cover" :src="getThumbUrl(slotParam.thumbUrl)"></video>
              </div>
            </template>
          </information-item-content>
        </div>
        <!-- 操作 -->
        <div class="option">
          <a-button
            v-if="infoData.infoState === 0 || infoData.infoState === 1 || infoData.infoState === 2"
            type="primary"
            size="small"
            ghost
            @click.stop="edit(props.infoId, props.infoData.infoType)"
          >
            编辑
          </a-button>
          <a-button
            v-if="infoData.infoState === 0 || infoData.infoState === 1 || infoData.infoState === 2"
            class="ml-2"
            size="small"
            @click.stop="recallNotice(props.infoId)"
          >
            撤回
          </a-button>
          <a-button
            v-else
            type="primary"
            size="small"
            ghost
            @click.stop="rePublish(props.infoId, props.infoData.infoType)"
          >
            重新发布
          </a-button>
          <a-button class="delete ml-2" size="small" @click.stop="deleteNotice(props.infoId)">
            删除
          </a-button>
        </div>
      </div>
      <div class="footer">
        <!-- 有效期限 -->
        <div v-if="!props.infoData.releaseInfoTimingVO">{{ dayValidTrem }}</div>
        <div v-else>{{ validTrem }}</div>
        <!-- 发布频率 -->
        <div v-if="!props.infoData.releaseInfoTimingVO"> 发布频率：{{ rate }} </div>
        <div v-else>
          <div v-if="props.infoData.releaseInfoTimingVO.length > 1">
            <Popover
              :get-popup-container="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }
              "
              trigger="hover"
            >
              <template #content>
                <div v-for="item in props.infoData.releaseInfoTimingVO" :key="item.id">
                  <span v-if="item.dayOfWeek === 1">周一: </span>
                  <span v-if="item.dayOfWeek === 2">周二: </span>
                  <span v-if="item.dayOfWeek === 3">周三: </span>
                  <span v-if="item.dayOfWeek === 4">周四: </span>
                  <span v-if="item.dayOfWeek === 5">周五: </span>
                  <span v-if="item.dayOfWeek === 6">周六: </span>
                  <span v-if="item.dayOfWeek === 7">周日: </span>
                  <span
                    >{{ item.timingPartStart.substr(0, 5) }} -
                    {{ item.timingPartStop.substr(0, 5) }}</span
                  >
                  <span></span>
                </div>
              </template>
              <div>
                发布频率：{{ rate }}
                <span v-if="props.infoData.releaseFrequency === 1">{{ week }}</span>
                <span
                  >{{ props.infoData.releaseInfoTimingVO[0].timingPartStart.substr(0, 5) }}-{{
                    props.infoData.releaseInfoTimingVO[0].timingPartStop.substr(0, 5)
                  }}...</span
                >
              </div>
            </Popover>
          </div>
          <div v-else>
            发布频率：{{ rate }}
            <span v-if="props.infoData.releaseFrequency === 1">{{ week }}</span>
            <span
              >{{ props.infoData.releaseInfoTimingVO[0].timingPartStart.substr(0, 5) }}-{{
                props.infoData.releaseInfoTimingVO[0].timingPartStop.substr(0, 5)
              }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  <my-dialog
    :dialog-state="dialog.visible"
    :dialog-title="dialog.title"
    :dialog-width="dialog.width"
    :icon-type="dialog.warring"
    :show-icon="true"
    :draft-box-visible="false"
    :content-text="dialog.content"
    :sub-content-text="dialog.subContent"
    @handleCancel="dialogCancel"
    @handleOk="dialogOk"
  ></my-dialog>
</template>
<script setup>
import { computed, defineProps, defineEmits, reactive, ref, onMounted } from 'vue';
import MyDialog from '@/components/dialog/index.vue';
import { Popover } from 'ant-design-vue';
import { defaultFengmian, getEscapeUrl, timeFns, columns } from '@/util/OBSUpload';
import InformationItemContent from './information-item-content';
import { useRouter } from 'vue-router';
import moment from 'moment';
const router = useRouter();
const props = defineProps({
  infoData: { type: Object, default: () => ({}) },
  infoId: { type: String }
});
const emit = defineEmits(['deleteInfo', 'recallInfo', 'getPostList', 'getPostList']);
// 弹窗相关
const dialog = reactive({
  type: '',
  title: '温馨提示',
  content: '',
  warring: 'warring',
  visible: false,
  width: '406px'
});
// 待生效 发布中
// const isPosted = ref(props.infoData.infoState === 0 || props.infoData.infoState === 1);
// 展示删除弹窗
function deleteNotice() {
  dialog.content = '是否确认删除该条信息发布？';
  dialog.subContent = '此操作不可恢复请谨慎操作！';
  dialog.visible = true;
  dialog.type = 'delete';
}
function recallNotice() {
  dialog.content = '是否确认撤回该条信息发布？';
  dialog.subContent = '';
  dialog.visible = true;
  dialog.type = 'recall';
}
// 点击编辑
function edit(id, value) {
  if (value === 1) {
    router.push({
      path: '/post-message/imgAndVideo',
      query: {
        id: id,
        state: '编辑',
        activeState: 0
      }
    });
  } else {
    router.push({
      path: '/post-message/article',
      query: {
        id: id,
        state: '编辑',
        activeState: 1
      }
    });
  }
  // }
  //  else if (value === 2) {
  //   router.push({
  //     path: '/post-message/file',
  //     query: {
  //       id: id,
  //       state: '编辑',
  //       activeState: 1
  //     }
  //   });
}
// 重新发布
function rePublish(id, value) {
  if (value === 1) {
    router.push({
      path: '/post-message/imgAndVideo',
      query: {
        id: id,
        state: '重新发布',
        activeState: 0
      }
    });
  } else {
    router.push({
      path: '/post-message/article',
      query: {
        id: id,
        state: '重新发布',
        activeState: 1
      }
    });
  }
  // if (value === 2) {
  //   router.push({
  //     path: '/post-message/file',
  //     query: {
  //       id: id,
  //       state: '重新发布',
  //       activeState: 1
  //     }
  //   });
  // } else
}
// 处理封面地址
function getThumbUrl(url) {
  // console.log('封面地址', url);
  if (defaultFengmian.indexOf(url) !== -1) {
    return url;
  } else {
    return getEscapeUrl(url, 'url'); // 封面url
  }
}
// 点击取消
function dialogCancel() {
  dialog.visible = false;
}
// 点击确定
function dialogOk() {
  dialog.visible = false;
  if (dialog.type === 'delete') {
    emit('deleteInfo', [props.infoData.id]);
  } else {
    emit('recallInfo', props.infoData.id);
  } // 刷新列表
  setTimeout(() => {
    emit('getPostList', 'getPostList');
  }, 200);
}
// 频率
const rate = computed(() => {
  if (props.infoData.releaseFrequency === 1) {
    return '每周';
  } else {
    return '每天';
  }
});
const week = computed(() => {
  switch (props.infoData.releaseInfoTimingVO[0].dayOfWeek) {
    case 1:
      return '周一:';
    case 2:
      return '周二:';
    case 3:
      return '周三:';
    case 4:
      return '周四:';
    case 5:
      return '周五:';
    case 6:
      return '周六:';
    default:
      return '周日:';
  }
});
// 有效期限
const validTrem = computed(() => {
  if (props.infoData.isForever === 0) {
    return `有效期限：
      ${moment(props.infoData.validPeriodStart).format('YYYY-MM-DD ')}
       至
      ${moment(props.infoData.validPeriodStop).format('YYYY-MM-DD')}`;
  } else {
    return `有效期限：${moment(props.infoData.validPeriodStart).format('YYYY-MM-DD ')} 至  永久`;
  }
});
// 有效期限
const dayValidTrem = computed(() => {
  if (props.infoData.isForever === 0) {
    return `有效期限：
      ${moment(props.infoData.validPeriodStart).format('YYYY-MM-DD HH:mm ')}
       至
      ${moment(props.infoData.validPeriodStop).format('YYYY-MM-DD HH:mm')}`;
  } else {
    return `有效期限：${moment(props.infoData.validPeriodStart).format(
      'YYYY-MM-DD HH:mm'
    )} 至  永久`;
  }
});
// 跳转信息详情
function toInfoDetailPage(id) {
  router.push({
    path: '/article-details',
    query: {
      id: id,
      from: '信息发布'
    }
  });
}
</script>
<style lang="less" scoped>
.information-item {
  margin-top: 16px;
  border-radius: 5px;
  border: 1px #e1dddd solid;
  &:hover {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    .img-container::after {
      background: rgba(0, 0, 0, 0.15) !important;
    }
    .cover {
      transform: scale(1.19);
      transition: all 0.5s;
    }
  }
  .img-container {
    width: 160px;
    height: 120px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.05);
    }
    .cover {
      width: 160px;
      height: 120px;
      object-fit: cover;
    }
  }
  .mains {
    padding: 16px 24px 16px 16px;
    .content {
      display: flex;
      justify-content: space-between;
    }
    // 操作
    .option {
      height: 24px;
      flex-shrink: 0;
      .ml-2 {
        margin-left: 8px;
        color: #999999;
        &:hover {
          color: #d6aa56 !important;
          border-color: #d6aa56 !important;
        }
        &:active,
        &:focus {
          border-color: #d9d9d9;
        }
      }
      // button {
      //   color: #d6aa56;
      // }
    }
  }
  // 底部区域
  .footer {
    margin-top: 16px;
    border-top: 1px solid #e1dddd;
    display: flex;
    justify-content: space-between;
    div {
      margin-top: 8px;
      height: 20px;
      font-size: 12px;
      color: #999999;
    }
    .qqq {
      display: flex;
    }
  }
}
.micro-ant-btn:focus {
  border-color: #e1dddd !important;
}
</style>
